------------------------------------------------------------------------------------------------------------
Introducción

Ariel Aizemberg  / twitter: @aaizemberg

SIIA ( http://www.siia.gov.ar/ ) & Ministerio de Agricultura ( http://www.minagri.gob.ar/ )
  
El proyecto RIDES esta parcialmente financiado por el SIIA @ MinAgri

En esta charla vamos ver como se hacen las aplicaciones interactivas en RIDES Tucumán.

  RIDES ( Aplicaciones Interactivas )
  http://rides.producciontucuman.gov.ar/index.php/aplicaciones

y los datos, los vamos a tomar de:

  RIDES ( Catalogo de Datos )
  http://rides.producciontucuman.gov.ar/index.php/catalogo-de-datos

  y del programa 2MP de CONAE

------------------------------------------------------------------------------------------------------------

"QGIS > WEB > MapServer Export"

Desde QGIS grabo un mapfile y aparece este hermoso messageBox:

  > If this mapfile is accessible by your mapserver, you
  should be able to see the capabilities by firing this url:
  http://localhost/cgi-bin/mapserv.exe?MAP=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetCapabilities

  > if this mapfile is accessible by your mapserver, you
  should be able to see a map by firing this url:
  http://localhost/cgi-bin/mapserv.exe?MAP=C:/ms4w/apps/ms101/htdocs/mapfile.map&LAYERS=ALL&MODE=MAP

------------------------------------------------------

http://localhost/cgi-bin/mapserv.exe?MAP=C:/ms4w/apps/ms101/htdocs/mapfile.map&LAYERS=bm01&MODE=MAP
http://localhost/cgi-bin/mapserv.exe?MAP=C:/ms4w/apps/ms101/htdocs/mapfile.map&LAYERS=bm06&MODE=MAP

testing the mapfile using mapserver & openlayers 
http://localhost/cgi-bin/mapserv.exe?MAP=C:/ms4w/apps/ms101/htdocs/mapfile.map&mode=browse&template=openlayers&LAYERS=bm01

------------------------------------------------------

Despues de leer esta página

  http://mapserver.org/ogc/wms_server.html
  ó
  http://localhost/msdocs/html/ogc/wfs_server.html

y adaptar un poco el .mapfile, lo podemos consultar como un servicio OGC (WMS)

GetCapabilities
1.1.1
http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetCapabilities

1.3.0
http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities

image/png

Las 12 imágenes, tienen este nombre: bm01 .. bm12

El bbox es:

String bbox = "167799.0477604639,6886556.863265967,377299.0477604639,7127556.863265967";
String bbox = "167799,6886557,377299,7127557";

GeoServer
http://localhost:8080/geoserver/rides/wms?service=WMS&version=1.1.0&request=GetMap&layers=rides:bm01&styles=&bbox=167799.0477604639,6886556.863265967,377299.0477604639,7127556.863265967&width=445&height=512&srs=EPSG:32720&format=image%2Fpng

MapServer
bm01
http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm01

bm01 y deptos
http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm01,deptos


Edward Tufte | small multiples

http://localhost/ms101/rides_01.html
----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
  <title>Edward Tufte | small multiples</title>
</head>
<body>
<h1>ET | Small Multiples</h1>
<img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm01,deptos" alt="enero" border="1">
<img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm02,deptos" alt="febrero" border="1">
<img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm03,deptos" alt="marzo" border="1">
<img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm04,deptos" alt="abril" border="1">
<img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm05,deptos" alt="mayo" border="1">
<img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm06,deptos" alt="junio" border="1">
<img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm07,deptos" alt="julio" border="1">
<img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm08,deptos" alt="agosto" border="1">
<img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm09,deptos" alt="septiembre" border="1">
<img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm10,deptos" alt="octubre" border="1">
<img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm11,deptos" alt="noviembre" border="1">
<img src="http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width=445&height=512&LAYERS=bm12,deptos" alt="diciembre" border="1">
</body>
</html>
----------------------------------------------------------------------------------------------------------------


Introducción a Processing ( http://www.processing.org/ ) / Processing.js ( http://processingjs.org/ )

http://localhost/ms101/rides_02.html

rides_02.html
------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
  <script src="./js/processing-1.4.1.min.js"></script>
  <title>Processing.js</title>
</head>
<body>
  <canvas data-processing-sources="./elipses.pde"></canvas>
</body>
</html>
------------------------------------------------------


elipses.pde
------------------------------------------------------
void setup() {
  size(800,600);
  background(0);
}

void draw() {
  fill(random(255),random(255), random(255));

  // random
  ellipse( random(width),random(height),random(40),random(40) );

  // agregando interactividad, usando mouseX y mouseY
  // ellipse( mouseX,mouseY,mouseX/4,mouseY/4);
}
------------------------------------------------------

La aplicacion interactiva usa:
  12 imagenes 1 x mes (GeoTIFF, UTM 20 S)
  https://2mp.conae.gov.ar/index.php/materialeseducativos/imagenes-satelitales/627-mosaicos-blue-marble-republica-argentina
  shortname = bm01, bm02, ..., bm12

  limites de los departamentos de Tucumán (SHP, POSGAR98 f3)
  http://rides.producciontucuman.gov.ar/index.php/catalogo-de-datos?task=edit&cid[0]=43
  shortname = deptos

El servidor de mapas (mapserver o geoserver), junta y reproyecta la información y me genera una imagen en formato PNG que la muestro desde Processing.
  
Load and Display Images
http://processing.org/learning/basics/loaddisplayimage.html

rides_03.html = FINAL

http://localhost/ms101/rides_03.html
------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
  <script src="./js/processing-1.4.1.min.js"></script>
  <title>RIDES | BlueMarble, 2004, x mes, Provincia de Tucumán, Argentina</title>
</head>
<body>
  <canvas data-processing-sources="./BM_Tuc_2004_MapServer.pde"></canvas>
</body>
</html>
------------------------------------------------------

BM_Tuc_2004_MapServer.pde
------------------------------------------------------
// Processing source code
PImage[] img = new PImage[12];   // un array con 12 imagenes (una por mes)

int cx;  // current X
int px;  // previous X

String host = "localhost";

String port = "80";
// String port = "8080";

String mapfile = "map=C:/ms4w/apps/ms101/htdocs/mapfile.map";

// String dir = "geoserver/rides/wms";
String url = "";
String layers = "";
String bbox = "167799,6886557,377299,7127557";
String srs = "EPSG:32720";

void setup() {
  size(419, 482);
  cargar_todas_las_imagenes();
}

void draw() {
  cx = round( map(mouseX, 0, width, 0, 11) );
  if (cx != px) {
    px = cx; // 0 a 11 = mes  1 al 12
    image(img[cx], 0, 0);
    lables();
  }
}

void cargar_todas_las_imagenes() {
  for (int i = 0; i < 12; i++) {
    layers = "bm" + nf(i+1, 2) + ",deptos";  // primero se dibuja la imagen satelital (bm..), luego los departamentos de Tucumán
    
    // GeoServer
    // url = "http://" + host + ":" + port + "/" + dir + "?service=WMS&version=1.1.0&request=GetMap&layers=" + layers + "&styles=&bbox=" + bbox + "&width="+width+"&height="+height+"&srs=" + srs + "&format=image%2Fpng";

    // MapServer
    url = "http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/ms101/htdocs/mapfile.map&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&SRS=EPSG:32720&BBOX=167799,6886557,377299,7127557&FORMAT=image/png&width="+width+"&height="+height+"&LAYERS=" + layers;
    
    // java
    // img[i] = loadImage(url, "png");

    // javascript
    img[i] = requestImage(url);
  }
  cx = 0;  // posX actual
  px = -1; // posX anterior
}

void lables() { 
  textAlign(CENTER);
  for (int i = 0; i < 12; i++) {
    if (i == cx) {
      fill(255, 0, 0); // RED
    }
    else
    { 
      fill(255); // WHITE
    }
    text(i+1, 16 + i * (width / 12.0), height - 2);
  }
}
------------------------------------------------------


  DONE

